<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >账户管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>个人账单</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="income_manager_content">
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="24">
            <div class="income_manager_totalMoney_box">
              <div class="income_manager_totalMoney_title">账户余额：</div>
              <div class="income_manager_totalMoney_value">
                {{ totalMoney }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0 20px">
          <el-col :span="24">
            <div class="income_manager_search">
              <el-button
                type="primary"
                size="mini"
                @click="addWithdrawalBtnFn()"
                >提现</el-button
              >
              <div style="margin-left: 10px">筛选：</div>
              <el-select
                v-model="checkdeAreaId"
                placeholder="请选择考点"
                size="mini"
                style="margin-left: 10px"
                @change="checkedAreaIdChange"
                :clearable="true"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>

              <el-date-picker
                v-model="checkdeTime"
                type="monthrange"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                style="margin-left: 10px"
                @change="checkedTimeChange"
              >
              </el-date-picker>

              <el-input
                v-model="searchKey"
                placeholder="请输入"
                style="margin-left: 10px; width: 200px"
                size="mini"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row
          type="flex"
          justify="center"
          v-if="incomeListData != undefined && incomeListData.length > 0"
        >
          <el-col :span="24">
            <el-table
              :data="incomeListData"
              border
              style="width: 100%"
              size="mini"
              :cell-style="cellStyleFn"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="order_number"
                label="订单编号"
                width="200"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="title"
                label="考试名称"
                min-width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="exam_money"
                label="金额"
                width="120"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="operation_type"
                label="操作类型"
                width="120"
                align="center"
                :formatter="formatterStatusFn"
              ></el-table-column>

              <el-table-column
                prop="name"
                label="支付人"
                width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="pay_time"
                label="付款时间"
                align="center"
                width="180"
              ></el-table-column>

              <el-table-column
                prop="refund_time"
                label="退款时间"
                align="center"
                width="180"
              ></el-table-column>

              <el-table-column
                prop="withdraw_time"
                label="提现时间"
                width="180"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="remark"
                label="提现备注"
                min-width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                label="操作"
                width="160"
                itemprop=""
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.operation_type != 3"
                    @click="detailFn(scope.$index, scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.operation_type == 3"
                    @click="editFn(scope.$index, scope.row)"
                    >修改</el-button
                  >

                  <el-button
                    size="mini"
                    type="danger"
                    v-if="scope.row.operation_type == 3"
                    @click="deleteFn(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-if="incomeListData != undefined && incomeListData.length > 0"
        >
          <el-col :span="24">
            <div class="income_manager_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-empty description="暂无数据"></el-empty>
        </el-row>
      </div>
    </el-row>
    <!-- 提现弹窗 -->
    <el-dialog
      :title="withdrawalDialogTitle"
      :visible.sync="withdrawalDialogVisible"
      width="500px"
      :before-close="withdrawalDialogClose"
    >
      <el-row>
        <el-col :span="24">
          <el-form
            ref="withdrawalSubmitFrom"
            :model="withdrawalSubmitData"
            label-width="100px"
            :rules="withdrawalRules"
          >
            <el-form-item label="金额" size="small" prop="money">
              <el-col :span="24">
                <el-input
                  type="number"
                  v-model="withdrawalSubmitData.money"
                  maxlength="6"
                ></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="备注" size="small" prop="remark">
              <el-col :span="24">
                <el-input
                  type="textarea"
                  v-model="withdrawalSubmitData.remark"
                  maxlength="100"
                  :rows="3"
                  resize="none"
                ></el-input>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div class="transaction_manager_dialog_btn_box">
            <el-button
              size="small"
              type="primary"
              @click="withdrawalDialogSubmitBtn()"
              style="margin-right: 30px"
              >确认</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="withdrawalDialogClose()"
              >取消</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/account/incomeManager.css" scoped></style>

<script>
export default {
  name: "IncomeManager",
  components: {},
  data() {
    return {
      incomeListData: [], // 订单列表数据
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      totalMoney: 0, // 账户余额
      searchKey: "", //搜索关键词
      orderStatusList: [
        {
          value: 1,
          label: "订单支付",
        },
        {
          value: 2,
          label: "订单退款",
        },
        {
          value: 3,
          label: "订单提现",
        },
      ],
      loadingKey: false,
      loadingText: "",
      checkdeAreaId: "", // 筛选--考点
      areaList: [], // 考点列表
      checkdeTime: "", // 筛选--日期
      withdrawalDialogTitle: "", // 提现弹窗标题
      withdrawalDialogVisible: false, // 提现弹窗显示
      withdrawalDialogEditId: "", // 提现编辑id
      withdrawalDialogEditKey: 0, // 是否编辑
      withdrawalSubmitData: {
        money: "",
        remark: "",
      }, // 提现弹框提交数据
      withdrawalRules: {
        money: [{ required: true, message: "请输入金额", trigger: "change" }],
      }, // 校验规则
    };
  },
  created: function () {
    this.getListDataFn();
    this.getAreaListFn();
  },
  methods: {
    // 搜索按钮
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 考点筛选
    checkedAreaIdChange: function (val) {
      this.checkdeAreaId = val;
    },
    // 时间筛选
    checkedTimeChange: function (val) {
      this.checkdeTime = val;
    },
    // 查询列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/adminusers/wallet";
      let data = {
        source: 1,
        keywords: this.searchKey,
        page: this.currentPage,
        perPage: this.pageSize,
        area_id: this.checkdeAreaId,
      };

      if (this.checkdeTime != null && this.checkdeTime != "") {
        data.exam_date_start = Date.parse(this.checkdeTime[0]) / 1000;
        data.exam_date_end = Date.parse(this.checkdeTime[1]) / 1000;
      }

      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.incomeListData = response.records;
            that.total = response.total_count;
            that.totalMoney = response.total_money;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取考点列表数据
    getAreaListFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [];
            response.area_list.forEach(function (item) {
              let obj = {
                key: item.id,
                value: item.area,
              };
              list.push(obj);
            });
            that.areaList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 3) {
        style = "color: #F6705E";
      }
      if (columnIndex == 4) {
        if (row.operation_type == 2 || row.operation_type == 3) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    // 订单状态格式化
    formatterStatusFn: function (row) {
      let orderStatus = row.operation_type;
      let text = "";
      this.orderStatusList.forEach(function (item) {
        if (item.value == orderStatus) {
          text = item.label;
        }
      });
      return text;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 查看详情
    detailFn: function (index, row) {
      const routeUrl = this.$router.resolve({
        name: "OrderDetail",
      });
      let params = {
        id: row.id,
        key: 3,
      };
      this.$store.commit("set_orderDetailParams", params);
      window.open(routeUrl.href, "_blank");
    },
    // 新增提现记录
    addWithdrawalBtnFn: function () {
      this.withdrawalDialogTitle = "新增提现记录";
      this.withdrawalDialogEditKey = 2;
      this.withdrawalDialogEditId = "";
      this.withdrawalSubmitData = {
        money: "",
        remark: "",
      };
      this.$nextTick(function () {
        this.withdrawalDialogVisible = true;
        this.$refs.withdrawalSubmitFrom.clearValidate();
      });
    },
    // 关闭提现弹窗
    withdrawalDialogClose: function () {
      this.withdrawalDialogVisible = false;
    },
    // 提现弹窗提交按钮
    withdrawalDialogSubmitBtn: function () {
      let that = this;
      let url = "";
      let data = {};
      if (this.withdrawalDialogEditKey == 1) {
        url = "/admin/adminusers/updateWithdrawal";
        data = {
          transaction_id: this.withdrawalDialogEditId,
          money: this.withdrawalSubmitData.money,
          remark: this.withdrawalSubmitData.remark,
        };
      } else {
        url = "/admin/adminusers/addWithdrawal";
        data = {
          order_source: 1,
          money: this.withdrawalSubmitData.money,
          remark: this.withdrawalSubmitData.remark,
        };
      }
      this.$refs.withdrawalSubmitFrom.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that.loadingText = "处理中...";
          that.loadingKey = true;
          this.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                if (that.withdrawalDialogEditKey == 1) {
                  that.$message.success("修改成功");
                } else {
                  that.$message.success("新增成功");
                }
                that.withdrawalDialogClose();
                that.getListDataFn();
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        }
      });
    },
    // 删除
    deleteFn: function (index, row) {
      let that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/adminusers/deltradingog";
        let data = {
          transaction_id: row.transaction_id,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.currentPage - 1;
              if (that.incomeListData.length == 1) {
                that.currentPage = next >= 1 ? next : 1;
              }
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 修改
    editFn: function (index, row) {
      if (row.operation_type == 3) {
        this.withdrawalDialogTitle = "修改提现记录";
        this.withdrawalDialogEditId = row.transaction_id;
        this.withdrawalDialogEditKey = 1;
        this.withdrawalSubmitData = {
          money: row.exam_money,
          remark: "" + row.remark,
        };
        this.$nextTick(function () {
          this.withdrawalDialogVisible = true;
          this.$refs.withdrawalSubmitFrom.clearValidate();
        });
      }
    },
  },
};
</script>
